<!-- 二手房详情 purchasedetails -->
<template>
	<view>
		<!-- <u-swiper :list="imgs || df" height='225' :radius='0'></u-swiper> -->
		<view class="u-rela">
			<view v-show="swiperAction === 0">
				<u-swiper height="80vw" radius="0" :list="imgs" :autoplay="true" @click="bannclick"></u-swiper>
			</view>
			<view v-show="swiperAction === 1">
				<u-swiper height="80vw" radius="0" :list="videos" :autoplay="false"></u-swiper>
			</view>
			<view class="swiperAction-box">
				<view @click="swiperAction = index" class="swiperAction" :class="index === swiperAction ? 'sction' : ''"
					v-for="(item, index) in swiperList" :key="index">{{ item }}</view>
			</view>
		</view>
		<home :bgColors='bgColors'></home>
		<view class="boxtop m-mg-lr">
			<view class="m-card u-p-t-30 u-p-b-30">
				<view class="">
					<text class="u-font-32 caf">{{detail.properties_name}}</text>
				</view>
				<view class="u-m-t-20 u-flex" v-if="length">
					<view class='boxhee u-m-r-20' v-if="item" v-for="(item,index) in detail.characteristic"
						:key='index'>
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="u-m-t-20 u-flex u-flex-between u-flex-wrap">
					<view class="u-flex boxwidth u-m-t-20 u-flex-items-center u-flex-center"
						v-for="(item,index) in list" :key='item.name'>
						<view class="boxwiid" :class="index%2 != 0 ? 'boxri u-m-r-20' : 'boxle'">
							<text class="c5a u-font-32">{{item.name}}:</text>
						</view>
						<view class="u-font-32 caf">
							<text>{{item.a}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="m-card u-p-t-30 u-p-b-30 u-m-t-30">
				<view class="u-flex u-flex-wrap u-flex-between">
					<view class="w_50 u-flex u-p-t-10 u-p-b-10" v-for="(item,index) in data" :key='index'>
						<text class="c8c u-font-26">{{item.name}} :</text>
						<text class="u-m-l-15 c5a u-font-26">{{item.type}}</text>
						<!-- <text class="u-m-l-15 c5a u-font-26" v-if="index == 0">{{get_look_two(item.type)}}</text> -->
					</view>
				</view>
				<view class="u-m-t-20">
					<view class="u-flex">
						<view class="c8c u-font-26 w30">房屋地址 :</view>
						<view class="c5a u-font-26 u-line-2">{{xinxi}}</view>
					</view>
				</view>
				<view class="u-m-t-20">
					<view class="u-flex">
						<view class="c8c u-font-26 w30">业主描述 :</view>
						<view class="c5a u-font-26">{{detail.mentality || ''}}</view>
					</view>
				</view>
				<view class="u-m-t-20">
					<view class="u-flex">
						<view class="c8c u-font-26">周边配套 :</view>
					</view>
				</view>
				<view class="u-m-t-20">
					<map id="map" style="width: 100%; height:215px;" :latitude="detail.lat" :longitude="detail.lon"
						@tap="toMap(detail.lat,detail.lon)" :enable-scroll="true" :enable-zoom="true"
						@regionchange='region'>
						<cover-view slot="callout">
							<cover-view :marker-id="detail.id" class="m-flex-y u-flex-items-center">
								<cover-view class="u-flex m-marker-box u-flex-1">
									<cover-view class="u-p-r-20 borright">
										<cover-view>{{ detail.properties_name }}</cover-view>
										<cover-view class="u-font-20 m-c-h u-m-t-10 m-line-1">{{ detail.address }}
										</cover-view>
									</cover-view>
									<cover-view class="m-flex-y u-flex-items-center u-m-l-20 m-flex-no">
										<cover-image src="/static/map/1.png" class="widhei"></cover-image>
										<cover-view class="m-c-g u-font-20">路线导航</cover-view>
									</cover-view>
								</cover-view>
								<cover-view class="daosanjiao"></cover-view>
							</cover-view>
						</cover-view>
						<!-- <cover-image class="map-dingwei" style="width: 20px;height: 20px;"
							:src="oss + '/df/dingwei.png'" @click="moveToLocation"></cover-image> -->
					</map>
				</view>
				<!-- 配套 -->
				<view class="u-p-t-10 u-p-l-40 u-p-r-20 u-p-b-10" v-for="(item, index) in listData" :key="item.name"
					v-if="item.nickname != '无'">
					<view class="u-flex">
						<u--image :showLoading="false" :src="item.src" width="32rpx" height="32rpx"></u--image>
						<view class="u-m-l-15 m-font-b u-font-26">
							<text>{{ item.name }}</text>
						</view>
					</view>
					<view class="pt-info">{{ item.nickname }}</view>
				</view>
				<!-- <view class="boxblue u-m-t-30">
					<text>交易流程图</text>
				</view> -->
				<view class="u-flex u-flex-center">
					<u--image :src='src2' width='300' height='675' radius='0' mode='aspectFit'></u--image>
				</view>
			</view>
			<!-- <view class="m-card u-p-t-30 u-p-b-30 u-m-t-30">
				<view class="boxblue u-m-t-30 u-m-b-30">
					<text>相似户型介绍</text>
				</view>
				<recommendation :code="dataList"></recommendation>
			</view> -->
			<view class="m-card u-m-t-30" v-if="yewu">
				<view class="boxblue u-m-t-30 u-m-b-30">
					<text>业务办理推荐</text>
				</view>
				<!-- <view class="m-card u-m-t-20 u-flex" v-for="(item,index) in dataitem" :key='index'> -->
				<view class="m-card u-m-t-20 u-flex">
					<view>
						<u--image :src='yelist.img || df' width='60' height='60'></u--image>
					</view>
					<view class="u-m-l-30 u-flex u-flex-wrap u-flex-between u-column w_100">
						<view>
							<text class="u-font-26 c21">{{yelist.title || ''}}</text>
						</view>
						<view>
							<text class="u-font-26 c5a">{{yelist.value || ''}}</text>
						</view>
						<view class="u-flex u-flex-between w_100">
							<view class="u-line-1">
							</view>
							<view class="">
								<view class="boxla" @click="getbo">
									点击联系
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view :style="{ height: 55 + bottoman + 'px' }"></view>
		<view class="nav-b" :style="{ height: 50 + bottoman + 'px' }">
			<view class="u-m-l-30 u-flex u-flex-around u-flex-items-center" style="width: 40%;">
				<view class="u-flex u-column u-flex-items-center u-flex-around" @click="requestStatus ? getshou() : ''">
					<view>
						<u-icon name='star' size='27' :color="detail.isGuanzhu == 1  ? '#dbb07b' : '#979797'"></u-icon>
					</view>
					<view>
						<text class="dui" :class="detail.isGuanzhu == 1 ? 'c9' : 'm-c-97'">
							{{detail.isGuanzhu == 1  ? '已收藏' : '收藏'}}
						</text>
					</view>
				</view>
				<view class="u-m-l-30 u-flex u-column u-flex-items-center u-flex-around"
					@click="requestStatus?getad():''">
					<view>
						<u-icon name='fuzhi' customPrefix='master' size='27' :color="detail.isDuibi === 0 ? ' #979797'
							: 'm-c-g'"></u-icon>
					</view>
					<view class="">
						<text class="dui">
							对比
						</text>
					</view>
				</view>
			</view>
			<view class="u-m-r-30 u-flex u-flex-items-center">
				<view class="box1" @click="requestStatus?getlian():''">
					<text>
						联系业主
					</text>
				</view>
				<view class="box2 u-m-l-20" @click="detail.isBanzheng === 1? '': requestStatus ? getyu() : ''">
					<text>{{detail.isyuyuekanfang === 0 ? '预约看房' : (detail.isBanzheng === 0 ? '预约办证' : '已预约办证')}}</text>
				</view>
			</view>
			<view class="m-bg-w" :style="{ height: bottoman + 'px' }"></view>
		</view>
		<u-popup :show="shows" @close="closes" zIndex='99999' mode="bottom" round='10' :closeOnClickOverlay='true'
			:overlayStyle="{zIndex:'99998'}">
			<view class="m-mg-lr u-m-t-30">
				<view>
					<text>预约到访时间</text>
				</view>
				<view class="u-m-t-30 u-flex u-flex-between u-flex-wrap">
					<view class="u-m-b-20" :class="datalist_index === index? 'boxb' : 'boxa'"
						v-for="(item,index) in datalist" :key='index' @click="datalist_index = index">
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="m-mg-lr u-border-top u-m-b-30 u-p-t-20">
					<view class="boxhuzi" @click="requestStatus?open():''">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		<u-calendar :show="show" mode="single" color="#0E5543" @confirm="confirm" @close="close"
			:closeOnClickOverlay="true"></u-calendar>
		<obtain :show="obtain" @showchange="obtain = false"></obtain>
		<u-loading-page loading-text="内当家APP" :loading="pageLoad"></u-loading-page>
	</view>
	</view>
</template>

<script>
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	var H = d.getHours(),
		i = d.getMinutes()
	const date = d.getDate();
	import QQMapWX from '@/common/qqmap-wx-jssdk.js';
	let qqmapsdk = new QQMapWX({
		key: 'VDPBZ-Z7A3K-7Z7JG-A6KLA-WIZJH-7QBTD'
	});
	export default {
		data() {
			return {
				shows: false,
				show: false,
				mode: 'single',
				yewu: false,
				detail: {},
				imgs: [],
				list: [],
				data: [],
				xinxi: '',
				dataitem: {},
				time: '',
				videos: [],
				swiperAction: 0,
				defaultDateMultiple: [`${year}-${month}-${date}`],
				img: '',
				datalist_index: null,
				datalist: [{
						name: '9:00-10:00'
					},
					{
						name: '10:00-11:00'
					},
					{
						name: '11:00-12:00'
					},
					{
						name: '12:00-13:00'
					},
					{
						name: '13:00-14:00'
					},
					{
						name: '14:00-15:00'
					},
					{
						name: '15:00-16:00'
					},
					{
						name: '16:00-17:00'
					},
					{
						name: '17:00-18:00'
					}
				],
				src2: 'https://neidangjia.oss-accelerate.aliyuncs.com/handhousing/ershoufang.png',
				src1: 'https://neidangjia.oss-accelerate.aliyuncs.com/room/%E7%9F%A9%E5%BD%A2%20580%20%E6%8B%B7%E8%B4%9D%203%403x.png',
				src: 'https://neidangjia.oss-accelerate.aliyuncs.com/room/%E6%A4%AD%E5%9C%86%20602%20%E6%8B%B7%E8%B4%9D%205%403x.png',
				listData: [{
						src: 'https://neidangjia.oss-accelerate.aliyuncs.com/room/%E6%A4%AD%E5%9C%86%20602%403x.png',
						name: '交通配套',
						nickname: ''
					},
					{
						src: 'https://neidangjia.oss-accelerate.aliyuncs.com/room/%E6%A4%AD%E5%9C%86%20602%20%E6%8B%B7%E8%B4%9D%403x.png',
						name: '教育配套',
						nickname: ''
					},
					// {
					// 	src: 'https://neidangjia.oss-accelerate.aliyuncs.com/room/%E6%A4%AD%E5%9C%86%20602%20%E6%8B%B7%E8%B4%9D%202%403x.png',
					// 	name: '商业配套',
					// 	nickname: '万科长安中心、长安万达购物广场、万润商场、天和百货、嘉佳超市'
					// },
					{
						src: 'https://neidangjia.oss-accelerate.aliyuncs.com/room/%E6%A4%AD%E5%9C%86%20602%20%E6%8B%B7%E8%B4%9D%203%403x.png',
						name: '医疗配套',
						nickname: ''
					},
					// {
					// 	src: 'https://neidangjia.oss-accelerate.aliyuncs.com/room/%E6%A4%AD%E5%9C%86%20602%20%E6%8B%B7%E8%B4%9D%204%403x.png',
					// 	name: '银行配套',
					// 	nickname: '中国银行、东莞农村商业银行、中国建设银行、中国工商银行。'
					// }
				],
				swiperList: ['图片'],
				id: null,
				length: 0,
				bgColors: 'transparent',
				yelist: {},
				bottoman: 0,
				cengji: false
			};
		},
		async onLoad(e) {
			if (e.id) {
				this.id = +e.id;
				let res5 = await this.require('getcompanyconfig');
				if (res5) {
					this.yelist = {
						img: res5[7].value,
						title: res5[6].title,
						value: res5[6].value,
						phone: res5[8].value
					}
				}
				this.path = 'splist';
				this.params = {
					...this.params,
					pnum: this.pnum,
				};
				await this.getList();
				await this.getde(+e.id);
				// let res4 = await this.require('getyewuguanjia');
				// if (res4) {
				// 	this.dataitem = res4;
				// 	this.img = res4.avatar;
				// }
				this.bottoman = uni.$u.sys().safeAreaInsets.bottom;
				if (this.pageLoad) {
					setTimeout(() => {
						this.pageLoad = false;
					}, 1000);
				}
			} else {
				this.nextNav('back')
			}
		},
		async onShow() {
			await this.getde(this.id);
		},
		onReady() {
			this.map = uni.createMapContext('map', this);
			// let covers = [{
			// 	id: this.detail.id,
			// 	latitude: +this.detail.lat,
			// 	longitude: +this.detail.lon,
			// 	iconPath: '/static/map/2.png',
			// 	alpha: 0.8,
			// 	width: 20,
			// 	height: 25,
			// 	callout: {
			// 		fontSize: 12,
			// 		bgColor: '#fff',
			// 		borderRadius: 10,
			// 		textAlign: 'center',
			// 		content: this.detail.properties_name,
			// 		padding: 7,
			// 		display: 'ALWAYS'
			// 	}
			// }];
			// this.map.addMarkers({
			// 	markers: covers,
			// 	clear: true
			// });
		},
		onPageScroll(e) {
			if (e.scrollTop < 260) {
				this.bgColors = 'transparent';
			} else {
				this.bgColors = '#fff';
			}
		},
		methods: {
			bannclick(e) {
				// 预览图片
				uni.previewImage({
					urls: this.imgs,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			region(e) {
				this.cengji = true;
				console.log(e);
			},
			moveToLocation() {
				this.map.moveToLocation({
					latitude: +this.detail.lat,
					longitude: +this.detail.lon
				});
			},
			async getshou() {
				let res = await this.require('sctowhouse', {
					id: this.detail.id,
					type: this.detail.isGuanzhu == 0 ? 0 : 1
				})
				if (res) {
					await this.getde(this.id);
				}
			},
			async getad() {
				this.requestStatus = false;
				let list = [];
				if (uni.getStorageSync('ershoufang')) {
					list = JSON.parse(uni.getStorageSync('ershoufang'))
				}
				let show = true;
				let that = this;
				if (list.length) {
					list.map((p, i) => {
						if (p.id == this.detail.id) {
							show = false;
							uni.showModal({
								content: '你已添加,是否前往对比列表',
								success(res) {
									if (res.confirm) {
										that.nextNav('/pages/room/comparison?type=1');
										that.requestStatus = true;
									}
									if (res.cancel) {
										uni.$u.toast('你取消了前往列表页面');
										that.requestStatus = true;
									}
								}
							})
						}
					})
				}
				if (!show) return;
				list.push(this.detail)
				uni.setStorageSync('ershoufang', JSON.stringify(list));
				this.nextNav('/pages/room/comparison?type=1');
				this.requestStatus = true;
			},
			getlian() {
				this.requestStatus = false;
				this.nextNav('/pages/news/xiaoxi?id=' + this.detail.user_id, 1);
				this.requestStatus = true;
			},
			async getyu() {
				this.requestStatus = false;
				if (!await this.getMobile()) {
					return;
				}
				this.show = true;
				this.requestStatus = true;
			},
			confirm(e) {
				if (e) {
					this.time = e[0] ? e[0] : this.defaultDateMultiple[0];
					this.shows = true;
				}
			},
			async open() {
				this.requestStatus = false;
				let kan = this.detail.isyuyuekanfang;
				let ban = this.detail.isBanzheng;
				if (this.datalist_index === null) {
					uni.$u.toast(`请选择${kan===0 ? '看房' : '办证'}时间`);
				} else {
					let time = this.time + '-' + this.datalist[this.datalist_index].name;
					let ro = this.detail.isyuyuekanfang === 0 ? 'yuyuekanfangs' : 'yuyuebanzheng';
					let res = await this.require(ro, {
						id: this.detail.id,
						date: time
					})
					if (res) {
						this.getde(this.id);
						this.show = false;
						this.shows = false;
						this.nextNav('/pages/handhousing/succeeded?time=' + time + '&h=' + H + '&i=' + i + '&id=' +
							this.detail.id + '&name=' + this.detail.properties_name + '&img=' + this.imgs[0]);
					}
				}
				this.requestStatus = true;
			},
			closes() {
				this.shows = false;
			},
			close() {
				this.show = false;
			},
			getbo() {
				let that = this;
				uni.makePhoneCall({
					phoneNumber: that.yelist.phone || ''
				});
			},
			async getde(id) {
				let res = await this.require('gettowhouse', {
					id
				})
				if (res) {
					console.log(res, "二手房详情")
					uni.setNavigationBarTitle({
						title: res.properties_name
					})
					this.getZhou({
						latitude: +res.lat,
						longitude: +res.lon
					});
					if (res.video_file) {
						if (res.video_file.length) {
							this.videos = res.video_file;
							this.swiperList = this.swiperList.concat('视频');
						}
					}
					res.lat = +res.lat;
					res.lon = +res.lon;
					this.detail = res;
					this.length = this.detail.characteristic ? this.detail.characteristic.length : 0;
					if (this.length) this.detail.characteristic = JSON.parse(this.detail.characteristic);
					this.imgs = res.images.split(',');
					let a = res.bedroom + '室' + res.room + '厅';
					let price = res.price;
					let fanchan = '';
					if(res.cardyear2_switch == 1){
						fanchan = "满两年"
					}else if(res.cardyear5_switch == 1){
						fanchan = "满五年"
					}else if(res.cardyear2_switch == 0 && res.cardyear5_switch == 0){
						fanchan = '未满两年';
					}
					this.list = [{
							a: price,
							name: '售价'
						}, {
							a: res.area + 'm²',
							name: '面积'
						}, {
							a,
							name: '房型'
						}
						// , {
						// 	a: price,
						// 	name: '指导价'
						// }
					];
					this.data = [
						// 	{
						// 	name: '单价',
						// 	type: res.price || ''
						// },
						{
							name: '楼层',
							type: res.floor || ''
						}, {
							name: '朝向',
							type: res.orientation || ''
						}, {
							name: '电梯',
							type: res.elevator || ''
						}, {
							name: '性质',
							type: res.roomnature || ''
						}, {
							name: '年代',
							type: res.year || ''
						}, {
							name: '装修',
							type: res.style || ''
						}, {
							name: '权属',
							type: res.situation || ''
						},{
							name: '房产证',
							type: fanchan
						},
						{
							name :'如何看房',
							type: res.lookroom || ''
						},
						{
							name : '是否唯一住房',
							type: res.only_switch == 1 ? '唯一住房' : '非唯一住房'
						}
					]
					this.xinxi = `${res.address || ''}-${res.areaname || ''}`;
					// this.listData[0].nickname = this.detail.bus ? this.detail.bus : '无';
					// this.listData[1].nickname = this.detail.study ? this.detail.study : '无';
					// this.listData[2].nickname = room.;
					// this.listData[2].nickname = this.detail.hospital ? this.detail.hospital : '无';
					let covers = [{
						id: +this.detail.id,
						latitude: +this.detail.lat,
						longitude: +this.detail.lon,
						iconPath: '/static/map/2.png',
						alpha: 0.8,
						width: 20,
						height: 25
					}];
					// #ifdef APP-PLUS
					covers[0].customCallout = {
						anchorX: 0,
						anchorY: 0,
						display: 'ALWAYS'
					};
					// #endif
					// #ifndef APP-PLUS
					covers[0].callout = {
						content: `${this.detail.properties_name}\n${this.detail.address}`,
						color: '#acacac',
						fontSize: 10,
						borderRadius: 4,
						bgColor: '#fff',
						padding: 5,
						display: 'ALWAYS',
						textAlign: 'center'
					};
					// #endif
					this.map = uni.createMapContext('map', this);
					this.map.addMarkers({
						markers: covers,
						clear: true
					});
				}
			},
			async getZhou(location) {
				this.listData = [{
						src: this.oss + '/room/%E6%A4%AD%E5%9C%86%20602%403x.png',
						name: '交通配套',
						nickname: await this.zhou('公交站', location)
					},
					{
						src: this.oss + '/room/%E6%A4%AD%E5%9C%86%20602%20%E6%8B%B7%E8%B4%9D%403x.png',
						name: '教育配套',
						nickname: await this.zhou('学校幼儿园小学初中高中', location)
					},
					{
						src: this.oss + '/room/%E6%A4%AD%E5%9C%86%20602%20%E6%8B%B7%E8%B4%9D%202%403x.png',
						name: '商业配套',
						nickname: await this.zhou('商圈步行街超市菜市场', location)
					},
					{
						src: this.oss + '/room/%E6%A4%AD%E5%9C%86%20602%20%E6%8B%B7%E8%B4%9D%203%403x.png',
						name: '医疗配套',
						nickname: await this.zhou('医院诊所门诊', location)
					},
					{
						src: this.oss + '/room/%E6%A4%AD%E5%9C%86%20602%20%E6%8B%B7%E8%B4%9D%204%403x.png',
						name: '银行配套',
						nickname: await this.zhou('银行', location)
					}
				];
			},
			async zhou(keyword, location) {
				return await new Promise((resolve, reject) => {
					qqmapsdk.search({
						keyword,
						location,
						success: res => {
							let nickname = '';
							let long = res.data.length > 4 ? 5 : res.data.length;
							for (var j = 0; j < long; j++) {
								nickname += (j > 0 ? '、' : '') + res.data[j].title.replace('[公交站]',
									'').replace(/[\(（][^\)）]+[\)）]/, '');
							}
							resolve(nickname);
						}
					});
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.boxtop {
		margin-top: 30rpx;
		position: relative;
		z-index: 2;
	}

	.c9 {
		color: #dbb07b;
	}

	.borright {
		border-right: 2rpx solid #f1f1f1;
	}

	.daosanjiao {
		width: 0;
		height: 0;
		border-top: 12rpx solid #fff;
		border-left: 12rpx solid transparent;
		border-right: 12rpx solid transparent;
	}

	.boxa,
	.boxb {
		width: 216rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		border-radius: 5rpx;
		font-size: 26rpx;
	}

	.map-dingwei {
		position: absolute;
		bottom: 5px;
		left: 5px;
	}

	.boxa {
		background-color: #eee;
		color: #211F20;
	}

	.boxri {
		text-align: right;
	}

	.boxb {
		background-color: #DAAF7F;
		color: #fff;
	}

	.m-marker-box {
		background-color: #fff;
		padding: 14rpx 26rpx;
		border-radius: 6rpx;
	}

	.boxhuzi {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		background-color: #daaf7f;
		border-radius: 10rpx;
	}

	.dui {
		font-size: 18rpx;
	}

	.box1,
	.box2 {
		width: 164rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 10rpx;
	}

	.box1 {
		background-color: #0E5543;
		color: #fff;
	}

	.box2 {
		border: 1rpx solid #0E5543;
		color: #0E5543;
	}

	.boxle {
		text-align: left;
	}

	.c21 {
		color: #211F20;
	}

	.widhei {
		width: 20px;
		height: 17px;
	}

	.swiperAction-box {
		position: absolute;
		left: 50%;
		bottom: 10px;
		transform: translate(-50%, 0);
		background-color: rgba(255, 255, 255, 0.75);
		height: 60rpx;
		border-radius: 60rpx;
		display: flex;
	}

	.swiperAction {
		width: 108rpx;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 60rpx;
	}

	.boxla {
		width: 120rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		border: 1rpx solid #0E5543;
		border-radius: 10rpx;
		color: #0E5543;
		font-size: 20rpx;
	}

	.boxblue {
		border-left: 6rpx solid #0E5642;
		padding-left: 15rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.caf {
		color: #211F20;
		width: 240rpx;
	}

	.boxwiid {
		width: 120rpx;
	}

	.c24 {
		color: #ACACAC;
	}

	.w_50 {
		width: 50%;
	}

	.c8c {
		color: #8c8c8c;
	}

	.sction {
		background-color: #d5b182;
		color: #fff;
	}

	.w30 {
		width: 125rpx;
	}

	.boxhee {
		padding: 2rpx 8rpx;
		border: 1rpx solid #b1b1b1;
		color: #b1b1b1;
		text-align: center;
		border-radius: 5rpx;
	}

	.boxright {
		border-right: 1rpx solid #eee;
		padding-right: 5rpx;
	}

	.boxwidth {
		width: 50%;
	}

	.c5a {
		color: #5a5a5a;
	}
</style>
<style>
	page {
		font-weight: bold !important;
	}
</style>
